<template>
  <el-dialog v-model="visible" class="app-dialog app-contribute-dialog" draggable title="修改密码" width="450" @close="handleClose">
    <el-form ref="formRef" :model="modelForm" :rules="rules" class="dialog-form pr-5 pb-3" size="large" scroll-to-error label-width="80px" label-position="right">
      <el-form-item label="旧密码" prop="password">
        <el-input v-model="modelForm.password" placeholder="请输入旧密码" type="password" show-password clearable />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="modelForm.newPassword" placeholder="请输入新密码" type="password" show-password />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="modelForm.confirmPassword" placeholder="请确认新密码" type="password" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSave"> 提交 </el-button>
        <el-button @click="handleClose"> 关闭 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus'
import { fetchUserPassword } from '@/api/system/user'
import { useUserInfo } from '@/hooks/web/useUserInfo'
import useUserStore from '@/store/modules/user'
import { useRouter } from 'vue-router'
import { notice } from '@/utils'

interface IProps {
  editVisible: boolean
  createData: any
  setEditVisible: any
}

const userStore = useUserStore()
const user = useUserInfo()
const router = useRouter()
const props = withDefaults(defineProps<IProps>(), {
  editVisible: false,
  createData: () => {},
  setEditVisible: () => {},
})

const modelForm = reactive({
  password: '123456',
  newPassword: '',
  confirmPassword: '',
})

const equalToPassword = (_: any, value: string, callback: any) => {
  if (modelForm.newPassword !== value) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const formRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'change' },
  ],
  newPassword: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'change' },
  ],
  confirmPassword: [
    { required: true, message: '确认密码不能为空', trigger: 'blur' },
    { required: true, validator: equalToPassword, trigger: 'change' },
  ],
})

// 关闭
const handleClose = () => {
  props.setEditVisible()
  formRef.value!.resetFields()
}

const onFinish = (data: any) => {
  fetchUserPassword({ id: user.id, params: data, type: 'patch' }).then((res: any) => {
    res ? handleSuccess() : notice(res?.error || '新增失败，请稍候在试~！', 'error')
  })
}

// 跳转
const toLogin = () => {
  setTimeout(() => {
    router.push('/login')
  }, 2000)
}

// 处理成功
const handleSuccess = () => {
  notice('登录成功，页面跳转中...')
  userStore.logout()
  toLogin()
}

// 提交
const onSave = () => {
  formRef
    .value!.validate((valid: any) => {
      if (!valid) return

      const data = unref(modelForm)

      onFinish(data)
    })
    .catch((error: any) => {
      console.log('error', error)
    })
    .finally(() => {})

  return false
}

const visible = ref(false)
watch(
  () => props.editVisible,
  (show) => {
    visible.value = show
  }
)
</script>
<style lang="scss"></style>
